<template>
	<view class="container">
		<view class="option">
			<view class="optionItem">
				<view class="oI" @click="navTo('/pages/user/modifyData/modifyData')">
					<view>个人资料</view>
					<u-icon name="arrow-right" size="30" color="#ccc"></u-icon>
				</view>
				<view class="oI" @click="navTo('/pages/user/modifyPassword/modifyPassword')">
					<view>修改密码</view>
					<u-icon name="arrow-right" size="30" color="#ccc"></u-icon>
				</view>
			</view>
			<view class="optionItem">
				<view class="oI">
					<view>清除缓存</view>
					<u-icon name="arrow-right" size="30" color="#ccc"></u-icon>
				</view>
				<view class="oI">
					<view>关于小莱</view>
					<u-icon name="arrow-right" size="30" color="#ccc"></u-icon>
				</view>
			</view>
		</view>
		<view class="footer" @click="leave">
		退出登录
		</view>
	</view>
</template>

<script setup>
 import { ref } from 'vue'
 import {
 	onShow,
 	onLoad
 } from "@dcloudio/uni-app"
 import { removeTokenExpired, removeToken } from '@/utils/localStoreToken.js'
 import { userStore } from '@/stores/userInfo/userInfo.js'

 
 
 
 //跳转
 function navTo(url) {
	 uni.navigateTo({
		 url
	 })
 }
 
 
 
 
 
 // 退出登录
 function leave(){
	 let user = userStore()
	 // 退出登录
	 // 清除token 和时间
	 removeToken()
	 removeTokenExpired()
	 // 清空userInfo
	 user.clearUserInfo()
	 uni.redirectTo({
	 	url: '/pages/user/login/login'
	 })
 }
 
 
 

</script>

<style lang="scss" scoped>

.option{
	padding: 20rpx 0;
	.optionItem{
		background-color: #fff;
		padding-left:25rpx ;
		margin-bottom: 15rpx;
		.oI{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 25rpx 25rpx 25rpx 0;
			padding-right:25rpx ;
			font-size: 25rpx;
			font-weight: 550;
			color: #4d4d4d;
			border-bottom: 1rpx solid #eee;
			&:last-child{
				border-bottom: none;
			}
		}
		&:last-child{
			margin-bottom: 0;
		}
	}
}
.footer{
	margin-top: 20rpx;
	padding: 30rpx 0;
	background-color: #fff;
	color: #fdd20f;
	text-align: center;
	font-size: 30rpx;
	&:active{
		opacity: 0.5;
	}
}
</style>
